<template>
  <div class="container-1200 tender-container tender-main-content">
      <div class="wy-main-title wy-m-t-20">
        <p>
            <span><nuxt-link to="./../info/index">首页</nuxt-link></span>
            <span>  /  招标物流  /  招标信息  /  </span>
            <span>{{detail.tendTitle|| '暂无'}}</span>
        </p>
      </div>
      <div class="tender-detail">
           <div class="tender-city">
              <h2>{{detail.tendTitle || '暂无'}}</h2>
              <div class="tende-time">
                  <span>发布时间：{{detail.createTime}}</span>
                  <span>浏览量:{{detail.lookNums}}次</span> 
              </div>
              <div class="tend-list tender-list-detail">
                      <div class="ant-list ant-list-vertical ant-list-lg ant-list-split" style="margin:0 auto;">
                        <div class="ant-spin-nested-loading">
                          <div class="ant-spin-container">
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">发布时间</div>
                                <div class="Infor-cont wy-text-nowrap">{{detail.startTime &&detail.startTime.split(' ')[0] || '暂无'}}</div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">政府/企业公共编号</div>
                                <!-- <div class="Infor-cont wy-text-nowrap">{{detail.tendNo || '暂无'}}</div></div> -->
                                <div class="Infor-cont wy-text-nowrap wy-w-170">{{detail.tendNo || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">招标方式</div>
                                <div class="Infor-cont wy-text-nowrap">{{detail.transCodeName}}</div>
                              </div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">运输类型</div>
                                <div class="Infor-cont">{{detail.transTypeName || '暂无'}}</div>
                              </div>
                            </div>
                            <div class="ant-list-item">
                                <div class="ant-list-item-content ant-list-item-content-single">
                                      <div class="Infor-title">出发招标区域(出发地)</div>
                                      <div class="Infor-cont">{{detail.beginPlace || '暂无'}}</div>
                               </div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                  <div class="Infor-title">到达招标区域(到达地)</div>
                                  <div class="Infor-cont">{{detail.endPlace || '暂无'}}</div>
                              </div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">报名开始时间</div>
                                <div class="Infor-cont">{{detail.signStartTime && detail.signStartTime.split(' ')[0] || '暂无'}}</div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">报名结束时间</div>
                                <div class="Infor-cont">{{detail.signEndTime && detail.signEndTime.split(' ')[0] || '暂无'}}</div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">开标时间</div>
                                <div class="Infor-cont">{{detail.startTime && detail.startTime.split(' ')[0] || '暂无'}}</div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">投标截止时间</div>
                                <div class="Infor-cont">{{detail.endTime && detail.endTime.split(' ')[0] || '暂无'}}</div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">招标预算</div>
                                <!-- <div class="Infor-cont">{{detail.tendPrice || '暂无'}}</div></div> -->
                                <div class="Infor-cont">{{detail.tendPriceDisplay || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">资金来源</div>
                                <div class="Infor-cont">{{detail.capitalSourceName || '暂无'}}</div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">联系人</div>
                                <!-- <div class="Infor-cont">{{detail.linkMan || '暂无'}}</div></div> -->
                                <div class="Infor-cont">{{detail.linkMan || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">联系电话</div>
                                <!-- <div class="Infor-cont wy-text-nowrap">{{detail.linkMobile || '暂无'}}</div></div> -->
                                <div class="Infor-cont wy-text-nowrap">{{detail.linkMobile || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">电子邮箱</div>
                                <!-- <div class="Infor-cont wy-text-nowrap">{{detail.linkEmail || '暂无'}}</div></div> -->
                                <div class="Infor-cont wy-text-nowrap">{{detail.linkEmail || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div></div>
                            </div>
                            <div class="ant-list-item">
                              <div class="ant-list-item-content ant-list-item-content-single">
                                <div class="Infor-title">传真</div>
                                <!-- <div class="Infor-cont wy-text-nowrap">{{detail.linkFax || '暂无'}}</div></div> -->
                                <div class="Infor-cont wy-text-nowrap">{{detail.linkFax || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div></div>
                            </div>
                          </div>
                        </div>
                      </div>
              </div>
              <!-- 招标内容 -->
              <div class="tender-notice">
                   <div class="tnder-main-title">招标内容</div>
                   <div class="notice-information">
                      <div>
                          <p>{{detail.tendContent}}
                          </p>
                    </div>
                   </div>
              </div>
              <!-- 公司简介 -->
              <div class="tender-company-profile">
                   <div class="tnder-main-title">公司简介
                      <nuxt-link to="./../../corp">进入企业主页</nuxt-link>
                   </div>
                   <div class="company-profile-content">
                        <p>{{companys.companyBriefRemark || '暂无'}}
                        </p>
                   </div>
              </div>
              <!-- 预览 -->
              <div class="tender-preview">
                 <div class="tnder-main-title">附件预览</div>
                 <div class="preview-content">
                    <div class="review-dowload" v-for="(item,index) in pathList" :key="index">
                        <p v-if="loggedIn">附件：{{item.name}}<a target="_banlk" :href="item.path"><a-icon type="download" /></a></p>
                        <p v-if="!loggedIn">附件：{{item.name}}<a href="/login"><a-icon type="download" /></a></p>
                    </div>
                 </div>
              </div>
           </div>
           <div class="tender-concat">
                <div class="tnder-main-title">联系方式</div>
                <div class="concat-content">
                    <h3>{{companys.company || '暂无'}}</h3>
                    <div v-if="companys.starLevel">
                        <span>用户星级</span>
                        <a-rate :defaultValue="companys.starLevel" disabled allowHalf />
                    </div>
                </div>
                <div class="concat-renzhen">
                    <a-button>{{companys.attestationStatusValue}}</a-button>
                </div>
                <!-- 分割线 -->
                <div class="concat-line"></div>
                <p>公司地址：{{companys.companyAddress || '暂无'}}</p>
                <p>详细地址：{{companys.detailAddress || '暂无'}}</p>
                <p>成立时间：{{companys.companyCreateTime&&companys.companyCreateTime.split(' ')[0]}}</p>
                <p>联系人：{{companys.legalPerson || '暂无'}}</p>
                <div class="tender-other-information">
                    <div class="tnder-main-title">公司其他招标信息</div>
                    <div class="tender-list-news">
                        <ul>
                           <li v-for="(item,index) in otherList" :key="index">
                             <nuxt-link :to="`./${item.tendId}`">
                             <i></i>
                             <span>{{item.tendTitle || '暂无'}}</span>
                             <span>{{item.endTime && item.endTime.split(' ')[0] || '暂无'}}</span>
                             </nuxt-link>
                           </li>
                        </ul>
                    </div>
                </div>
           </div>
      </div>

  </div>
</template>

<script>
import { environment } from './../../../server/environment'
import AuthMixin from '~/mixins/auth'
export default {
  mixins: [ AuthMixin ],
  components: {
  },
  async asyncData ({ app, $axios, params, query, error }) {
      const returnData = {}
      const id = params.id
      try {
          const { data } = await $axios.$get('/api/info/logisticsTenderee/open/getOpenLogisticsTendereeDetaill/'+id, { params: {} })
          returnData.detail = data;
      } catch (err) {
          return error({ statusCode: err.code, msg: err.msg })
      }
      return returnData
  },
  data () {
    return {
       listData:[],
       detail: {},
       otherList: [],
       companys: {},//联系方式
       pathList: []
    }
   },
  created() {
     if (this.detail.userId){
        this.logisticsTenderees(this.$route.params.id);
        this.concatUserID(this.detail.userId);
        this.tenderscs();
      }
     const id = this.$route.params.id
      
  },
  watch:{
      '$route':function(){
        if(this.detail.userId){
          this.concatUserID(this.detail.userId);
          this.tenderscs();
        }
      }
  },
  methods:{
      //招标详情
      async logisticsTenderees (id) {
          const res = await this.$store.dispatch('info/tofindBidById',id)
          if (res.status) {
            this.detail = res.data;
            if(this.detail.fileName){
              let arr = [];
              let nameArr = this.detail.fileName.split(',');
              let pathArr = this.detail.filePath.split(',');
              for(var i = 0;i<nameArr.length;i++){
                this.pathList.push({
                  name: nameArr[i],
                  path: environment.FileUploadUrl2+pathArr[i]
                })
              }
            }
          } 
      },
      // 公司简介
      async concatUserID (id) {
          const res = await this.$store.dispatch('info/concatUserID',id)
          // if (res.status) {
            this.companys = res;
          // } 
      },
      async tenderscs () {
          const res = await this.$store.dispatch('info/tenderscs',{
                LogisticsTendereeId: this.detail.tendId,
                companyId : this.detail.userId,
                tendStatus: 0,
          })
          if (res.status) {
            this.otherList = res.data.rows;
            console.log(this.otherList,111111)
            // this.pagination.total = res.data.total;
          } 
      },
    } 
}
</script>
<style lang="scss">
@import "./../../../assets/css/invite/inviteDetail.scss";
.tender-main-content{
  .wy-w-170{
      width: 170px !important;
  }
  .tender-list-detail{
    height:370px;
    margin-top:20px;
  }
  //预览
  .tender-preview{
    height:90px;
    margin-bottom:50px;
      .tnder-main-title{
        width:740px;
      }
      .preview-content{
        margin-top:26px;
        .review-dowload{
            margin-left:17px;
            width:350px;
            float:left;
            font-size:14px;
            color:#333333;
            svg{
                margin-left:22px;
                color:#15837A;
            }
        }
        // .review-dowload:nth-child(1){
        //     margin-left:17px;
        //     margin-right:15px;
        // }
      }
   }
  .tender-detail{
      .tender-city {
        .ant-list-item:nth-child(9){
              width:370px;
          }
      }
  }

  //联系方式
  .tender-concat{
    width:400px;
    float:right;
    .concat-content{
      margin-left:20px;
      h3{
        margin:0;
        padding:0;
        fot-size:18px;
        color:#15837A;
        font-weight:500;
        margin-top:26px;
        margin-bottom:20px;
      }
      div{
        span{
          font-size:14px;
          color:#333333;
          margin-right:10px;
        }
      }
    }
    .concat-renzhen{
      width:80px;
      height:26px;
      margin-left:20px;
      margin-top:15px;
      button{
        outline:none;
        border:none;
        background:#FFA200;
        color:#FFFFFF;
        font-size:14px;
        border-radius:2px !important;
      }
    }
    .concat-line{
      width:376px;
      height:1px;
      border:1px solid #D8D8D8;
      margin-top:28px;
      margin-bottom:20px;
      margin-left:20px;
    }
    p{
      font-size:14px;
      color:#333333;
      line-height:18px;
      margin-left:20px;
    }
    .tender-other-information{
      margin-top:40px;
      ul{
        margin:0;
        padding:0;
        margin-top:25px;
        li{
          margin-left:20px;
          margin-top:12px;
          i{
            font-style:normal;
            width:6px;
            height:6px;
            background:#15837A;
            border-radius:50%;
            display:inline-block;
            margin-right:6px;
            vertical-align:middle;
          }
          span{
            font-size:14px;
            color:#444444;
            display:inline-block;
          }
          span:last-child{
            float:right;
          }
        }
      }
    }
  }
}
</style>